<%@ page import="java.util.ArrayList" %>
<%@ page import="java.util.List" %>
<%@ page import="Bean.property.PurchasePieDTO" %>
<%@ page import="Bean.property.RemarkPieDTO" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
    // 防止空指针
    Bean.property.FlowTrendDTO flowTrend = (Bean.property.FlowTrendDTO) request.getAttribute("flowTrend");
    List<PurchasePieDTO> purchaseList = (List<PurchasePieDTO>) request.getAttribute("purchaseOption");
    List<RemarkPieDTO> remarkList = (List<RemarkPieDTO>) request.getAttribute("remarkOption");
    List<String> dateList = flowTrend != null ? flowTrend.getDateList() : new ArrayList<>();
    List<Double> incomeList = flowTrend != null ? flowTrend.getIncomeList() : new ArrayList<>();
    List<Double> payList = flowTrend != null ? flowTrend.getPayList() : new ArrayList<>();
    Bean.property.ZhuZhuangDTO expenseincomeOption = (Bean.property.ZhuZhuangDTO) request.getAttribute("expenseincomeOption");
    List<String> teaTypes = expenseincomeOption != null ? expenseincomeOption.getTeaList() : new ArrayList<>();
    List<Double> teaIncome = expenseincomeOption != null ? expenseincomeOption.getIncomesList() : new ArrayList<>();
    List<Double> teaExpense = expenseincomeOption != null ? expenseincomeOption.getExpensesList() : new ArrayList<>();
    String startDate = request.getParameter("startDate");
    String endDate = request.getParameter("endDate");
%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <base href="<%= basePath %>"/>
    <title>财务报表</title>
    <style>
        body {
            background: #f5f6fa;
            font-family: 'Segoe UI', 'Arial', sans-serif;
            margin: 0;
            padding: 0;
        }
        .container {
            max-width: 1200px;
            margin: 32px auto;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 4px 24px rgba(0,0,0,0.06);
            padding: 32px 40px;
        }
        h2 {
            color: #222;
            margin-bottom: 24px;
        }
        .filter-form {
            display: flex;
            align-items: center;
            gap: 18px;
            margin-bottom: 32px;
        }
        .filter-form label {
            font-size: 1rem;
            color: #555;
        }
        .filter-form input[type="date"] {
            padding: 8px 12px;
            border: 1px solid #dcdde1;
            border-radius: 6px;
            font-size: 1rem;
            background: #f9f9f9;
        }
        .filter-form input[type="submit"] {
            padding: 8px 28px;
            background: #4f8cff;
            color: #fff;
            border: none;
            border-radius: 6px;
            font-size: 1rem;
            cursor: pointer;
            transition: background 0.2s;
        }
        .filter-form input[type="submit"]:hover {
            background: #357ae8;
        }
        .charts {
            display: flex;
            flex-direction: column;
            gap: 32px;
            margin-top: 32px;
        }
        .chart-box {
            flex: 1;
            background: #f9f9f9;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
            padding: 24px 18px 18px 18px;
        }
        .chart-title {
            text-align: center;
            font-size: 1.1rem;
            color: #333;
            margin-bottom: 12px;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<div class="container">
    <h2>财务报表</h2>
    <form class="filter-form" method="get" action="FinancialStatements">
        <label for="startDate">时间段：</label>
        <input type="date" id="startDate" name="startDate" value="<%= startDate %>">
        <span>至</span>
        <input type="date" id="endDate" name="endDate" value="<%= endDate %>">
        <input type="submit" value="查询">
    </form>
    <div class="charts">
        <div class="chart-box">
            <div class="chart-title">资金收支流动</div>
            <div id="flowChart" style="width:100%;height:350px;"></div>
        </div>
        <div class="chart-box">
            <div class="chart-title">收入金额占比</div>
            <div id="remarkPie" style="width:100%;height:350px;"></div>
        </div>
        <div class="chart-box">
            <div class="chart-title">采购支出金额占比</div>
            <div id="purchasePie" style="width:100%;height:350px;"></div>
        </div>
        <div class="chart-box">
            <div class="chart-title">茶叶收支平衡对比</div>
            <div id="teaBalanceChart" style="width:100%;height:400px;"></div>
        </div>
    </div>
</div>

<script>
    console.log("<%= teaTypes %>");
    console.log("<%= teaIncome %>");
    console.log("<%= teaExpense %>");
var xAxisData = [
<% for(int i=0; i<dateList.size(); i++) { %>
    "<%= dateList.get(i) %>"<%= (i < dateList.size()-1) ? "," : "" %>
<% } %>
];
var incomeData = [
<% for(int i=0; i<incomeList.size(); i++) { %>
    <%= incomeList.get(i) %><%= (i < incomeList.size()-1) ? "," : "" %>
<% } %>
];
var payData = [
<% for(int i=0; i<payList.size(); i++) { %>
    <%= payList.get(i) %><%= (i < payList.size()-1) ? "," : "" %>
<% } %>
];
// 资金收支流动折线图（静态数据）
var flowChart = echarts.init(document.getElementById('flowChart'));
var flowOption = {
    tooltip: { trigger: 'axis' },
    legend: { data: ['收入', '支出'] },
    xAxis: { type: 'category', data: xAxisData },
    yAxis: { type: 'value' },
    series: [
        { name: '收入', type: 'line', data: incomeData, smooth: true },
        { name: '支出', type: 'line', data: payData, smooth: true }
    ]
};
flowChart.setOption(flowOption);

// 备注类型金额占比饼图（静态数据）
var remarkData = [
<% for(int i=0; i<remarkList.size(); i++) { 
    RemarkPieDTO dto = remarkList.get(i);
    %>
    { value: <%= dto.getValue() %>, name: "<%= dto.getName() %>" }<%= (i < remarkList.size()-1) ? "," : "" %>
<% } %>
];
var remarkPie = echarts.init(document.getElementById('remarkPie'));
var pieOption = {
    tooltip: { trigger: 'item' },
    legend: { orient: 'vertical', left: 'left' },
    series: [
        {
            name: '备注类型',
            type: 'pie',
            radius: '70%',
            data: remarkData,
            emphasis: {
                itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.2)' }
            }
        }
    ]
};
remarkPie.setOption(pieOption);

// 采购支出金额占比饼图（静态数据）
var purchaseData = [
<% for(int i=0; i<purchaseList.size(); i++) { 
    PurchasePieDTO dto = purchaseList.get(i);
%>
    { value: <%= dto.getValue() %>, name: "<%= dto.getName() %>" }<%= (i < purchaseList.size()-1) ? "," : "" %>
<% } %>
];
var purchasePie = echarts.init(document.getElementById('purchasePie'));
var purchaseOption = {
    tooltip: { trigger: 'item' },
    legend: { orient: 'vertical', left: 'left' },
    series: [
        {
            name: '采购类型',
            type: 'pie',
            radius: '70%',
            data: purchaseData,
            emphasis: {
                itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.2)' }
            }
        }
    ]
};
purchasePie.setOption(purchaseOption);

// 茶叶收支平衡柱状图
var teaTypes = [
<% for(int i=0; i<teaTypes.size(); i++) { %>
    "<%= teaTypes.get(i) %>"<%= (i < teaTypes.size()-1) ? "," : "" %>
<% } %>
];
var teaIncomeData = [
<% for(int i=0; i<teaIncome.size(); i++) { %>
    <%= teaIncome.get(i) %><%= (i < teaIncome.size()-1) ? "," : "" %>
<% } %>
];
var teaExpenseData = [
<% for(int i=0; i<teaExpense.size(); i++) { %>
    <%= teaExpense.get(i) %><%= (i < teaExpense.size()-1) ? "," : "" %>
<% } %>
];

var teaBalanceChart = echarts.init(document.getElementById('teaBalanceChart'));
var teaBalanceOption = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        },
        formatter: function(params) {
            var result = params[0].name + '<br/>';
            params.forEach(function(param) {
                result += param.seriesName + ': ￥' + param.value.toLocaleString() + '<br/>';
            });
            // 计算净收入
            var income = params.find(p => p.seriesName === '收入').value;
            var expense = params.find(p => p.seriesName === '支出').value;
            var net = income - expense;
            result += '净收入: ￥' + net.toLocaleString() + ' (' + (net >= 0 ? '+' : '') + net + ')';
            return result;
        }
    },
    legend: {
        data: ['收入', '支出'],
        top: 10
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: teaTypes,
        axisLabel: {
            fontSize:10
        }
    },
    yAxis: {
        type: 'value',
        name: '金额 (￥)',
        axisLabel: {
            formatter: function(value) {
                return '￥' + value.toLocaleString();
            }
        }
    },
    series: [
        {
            name: '收入',
            type: 'bar',
            data: teaIncomeData,
            itemStyle: {
                color: '#67C23A'
            },
            emphasis: {
                itemStyle: {
                    color: '#85CE61'
                }
            }
        },
        {
            name: '支出',
            type: 'bar',
            data: teaExpenseData,
            itemStyle: {
                color: '#F56C6C'
            },
            emphasis: {
                itemStyle: {
                    color: '#F78989'
                }
            }
        }
    ]
};
teaBalanceChart.setOption(teaBalanceOption);

// 响应式处理
window.addEventListener('resize', function() {
    flowChart.resize();
    remarkPie.resize();
    purchasePie.resize();
    teaBalanceChart.resize();
});
</script>
</body>
</html>